<script setup lang="ts">
import type { CSSProperties } from 'vue'

interface Props {
  mode?: 'active' | 'black' | 'default' | 'red' // 蓝色背景,黑色背景，灰色背景,
  color?: string // 自定义小圆点的颜色
  count?: number // 展示的数字，大于 max 时显示为 max+，为 0 时隐藏；number
  max?: number // 展示封顶的数字值
  showZero?: boolean // 当数值为 0 时，是否展示 Badge
  dot?: boolean // 不展示数字，只有一个小红点
  status?: 'success' | 'default' | 'fail' | '' // 设置 Badge 为状态点
  text?: string // 在设置了 status 的前提下有效，设置状态点的文本 string
  countStyle?: CSSProperties // 设置状态点的样式
  title?: string // 设置鼠标放在状态点上时显示的文字
}
defineOptions({
  name: 'BaseBadge',
})
const props = withDefaults(defineProps<Props>(), {
  mode: 'default',
  color: '',
  count: 0,
  max: 99,
  showZero: false,
  dot: false,
  status: '',
  text: '',
  countStyle: () => ({}),
  title: '',
})

const { bool: showContent, setBool } = useBoolean(true)

const presetColor = ['white', 'black', 'error', 'warn', 'green', 'blue']
const contentRef = ref()

const customStyle = computed(() => {
  if (props.color && !presetColor.includes(props.color)) {
    return {
      color: props.color,
      backgroundColor: props.color,
    }
  }
})

onMounted(() => {
  if (!props.status && !props.color)
    setBool(!!useSlots().default)
})
</script>

<template>
  <div class="m-badge" :class="[`${status ? 'badge-status' : ''}`, `${mode}-badge`]">
    <template v-if="status || color">
      <span
        class="u-status-dot"
        :class="[`status-${status || color}`]"
        :style="customStyle"
      />
      <span class="u-status-text">
        <slot>{{ text }}</slot>
      </span>
    </template>
    <template v-else>
      <span v-if="showContent" ref="contentRef">
        <slot />
      </span>
      <div
        v-show="showZero || count !== 0 || dot"
        class="m-badge-count center"
        :class="{
          'small-num': count < 10,
          'only-number': !showContent,
          'only-dot': count === 0 && !showZero,
        }"
        :style="countStyle"
        :title="title || String(count)"
      >
        <span v-if="!dot" class=" text-[.625rem] leading-[.75rem] font-bold text-[var(--color-black-0)] ">
          {{ count > max ? `${max}+` : count }}
        </span>
      </div>
    </template>
  </div>
</template>
<style scoped lang="scss">
  .m-badge{
    min-width: 1.125rem;
    background-color: #9FE871;
    border-radius: .25rem;
  }
</style>
